<template>
  <div class="total-nav">
    <div class="total">
      <div class="total-center">
        <div class="text">背景图</div>
        <el-upload
          v-model:file-list="fileList"
          action="#"
          list-type="picture-card"
          :auto-upload="false"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
        <el-dialog v-model="dialogVisible">
          <img
            w-full
            :src="dialogImageUrl"
            style="height: 100%; width: 100%"
            alt="Preview Image"
          />
        </el-dialog>
        <div class="text">个人简介</div>
        <el-input
          v-model="textarea"
          :rows="4"
          maxlength="200"
          show-word-limit
          type="textarea"
          placeholder="请输入个人简介"
        />
        <div class="buttonClass">
          <el-button>取消</el-button>
          <el-button style="background-color: #f93684"
            ><RouterLink
              style="text-decoration: none; color: white"
              to="/userinfo"
              >保存</RouterLink
            ></el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

import { Plus } from "@element-plus/icons-vue";

import type { UploadProps, UploadUserFile } from "element-plus";

const fileList = ref<UploadUserFile[]>([]);

const textarea = ref("");

const dialogImageUrl = ref("");
const dialogVisible = ref(false);

const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
</script>

<style>
.total-nav {
  background-color: #f5f7f9;
  padding-top: 20px;
  min-height: 90vh;
}
.total {
  width: 1200px;
  margin: 0 auto;
  background-color: #fff;
}
.total-center {
  margin: 0 50px;
}
.text {
  margin: 20px 0;
  padding-top: 10px;
}
.el-textarea {
  --el-input-focus-border-color: #f93684;
}
.el-textarea__inner {
  background-color: #f5f7f9 !important;
}
.el-input__count {
  background-color: #f5f7f9 !important;
}
.el-upload--picture-card {
  width: 358px;
  height: 188px;
  background-color: #e7e6ed;
}
.el-upload-list__item {
  width: 358px !important;
  height: 188px !important;
}
.buttonClass {
  display: block;
  text-align: center;
}
.el-button {
  margin: 20px auto;
  width: 120px;
  height: 42px;
}
</style>
